<template>
    <!-- 验证码文件 -->
    <div>
        <canvas width="110" height="35" id="myCanvas" @click="myGetVeri"></canvas>
    </div>
</template>

<script>
//引入获取验证码接口
import { getVeri} from '@/api/common.js'
export default {
    data(){
        return{
            veri:''//设置 验证码初始值
        }
    },
    mounted() {
        this.myGetVeri()
    },
    methods: {
        //设置 获取验证码的方法
        async myGetVeri(){
            var res = await getVeri()
            console.log(res);
            this.veri = res.data.data;
            this.init(this.veri)
        },


        //通过canvas绘制验证码的方法
        init(str) { //str 变量是传进来进行绘制的验证码
            //获取画布
            var myCanvas = document.getElementById('myCanvas');
            //获取画笔
            var ctx = myCanvas.getContext('2d');
            //画验证码之前,先清除画布,避免出现重复画验证码
            ctx.clearRect(0,0,110,35)
            //绘制字母
            for (var i = 0; i < str.length; i++) {
                //设置字体大小，和字体类型
                ctx.font = '30px 黑体';
                //设置字体随机颜色
                ctx.fillStyle = this.ranColor()
                //设置实心字体，字体起始位置
                ctx.fillText(str[i], i * 20 + this.ranDom(7, 20), this.ranDom(18, 35))
            }
            //绘制干扰线 5个
            for(var j=0;j<5;j++){
                //另起笔，重新起笔
                ctx.beginPath();
                //线段起始位置
                ctx.moveTo(this.ranDom(0,110),this.ranDom(0,35));
                //线段终点位置
                ctx.lineTo(this.ranDom(0,110),this.ranDom(0,35));
                //随机线的颜色
                ctx.strokeStyle = this.ranColor();
                //线段描边，不描不显示
                ctx.stroke()
            }
            //绘制干扰点    20个
            for(var k=0;k<20;k++){
                ctx.beginPath();
                //设置干扰点的坐标
                var x = this.ranDom(0,110);
                var y = this.ranDom(0,35);
                ctx.moveTo(x,y);
                ctx.lineTo(x+1,y+1);
                ctx.strokeStyle = this.ranColor()//设置干扰点的颜色
                ctx.stroke()
            }

        },
        ranDom(a, b) {
            //随机数
            return Math.floor(Math.random() * (b - a + 1) + a)
        },
        ranColor() {
            //随机颜色
            return `rgb(${this.ranDom(0, 255)},${this.ranDom(0, 255)},${this.ranDom(0, 255)})`
        }
    }
}
</script>

<style lang="less" scoped></style>